import React, {Component} from 'react';
import {Upload, Button, Icon, message, Input, Select} from 'antd';
import {URL} from "../../../src/constant/Constant"
import reqwest from 'reqwest';
import {countryOfProvinceData,countryData} from "../../../src/constant/ProvinceDataConstantd";

const Option = Select.Option;

class UpLoad extends Component {
    state = {
        fileList: [],
        uploading: false,
        type: -1,//文件的类别0代表文档，1代表pdf
        title: "",
        category: "",
        author: "",
        description: "",//描述，可以市关键字
        fileName: "",
        province: "",//省
        tempCountry:"",
        //city: "",//市
        //cityData = countryOfProvince  provinceData = c
        country:countryOfProvinceData[countryData[0]],
        countryOfProvince:countryOfProvinceData[countryData[0]][0],
        //cities: cityData[provinceData[0]],
        //secondCity: cityData[provinceData[0]][0],
    };

    handleCountryChange = value => {
        this.setState({
            tempCountry: value,
            country: countryOfProvinceData[value],
            countryOfProvince: countryOfProvinceData[value][0],
        });
    };

    onCountryOProvinceChange = value => {
        this.setState({
            province:value,
            countryOfProvince: value,
        });
    };

    handleTypeChange(value) {

        this.setState({
            type: value
        })
    }

    handleTitleChange(value) {
        this.setState({
            title: value
        })
    }

    handleCategoryChange(value) {
        this.setState({
            category: value
        })
    }

    handleAuthorChange(value) {
        this.setState({
            author: value
        })
    }

    handledDescriptionChange(value) {
        this.setState({
            description: value
        })
    }

    handleUpload = () => {
        const {fileList} = this.state;
        const formData = new FormData();
        fileList.forEach(file => {
            formData.append('file', file);
        });

        formData.append("type", this.state.type);
        formData.append("title", this.state.fileName);
        formData.append("category", this.state.category);
        formData.append("author", this.state.author);
        formData.append("description", this.state.description);
        formData.append("province",this.state.province);
        formData.append("country",this.state.tempCountry);


        this.setState({
            uploading: true,
        });


        // You can use any AJAX library you like
        reqwest({
            //url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
            url: URL.urlRoot + URL.addDocument,
            //url:"http://127.0.0.1:8080/springbootjpacementv4_1_war/uploaddocument",
            method: 'post',
            processData: false,
            data: formData,
            success: () => {
                this.setState({
                    fileList: [],
                    uploading: false,
                });
                message.success('上传成功！');
            },
            error: () => {
                this.setState({
                    uploading: false,
                });
                message.error('上传出错了！');
            },
        });
    };

    render() {
        const {cities, countryOfProvince, country} = this.state;

        console.log(countryOfProvince)
        const {uploading, fileList} = this.state;
        const {TextArea} = Input;
        const props = {
            onRemove: file => {
                this.setState(state => {
                    const index = state.fileList.indexOf(file);
                    const newFileList = state.fileList.slice();
                    newFileList.splice(index, 1);
                    return {
                        fileList: newFileList,
                    };
                });
            },
            beforeUpload: file => {


                this.setState(state => ({
                    fileList: [...state.fileList, file],
                    fileName: file["name"].substring(0, file["name"].indexOf('.'))
                }));
                return false;
            },
            fileList,
        };

        console.log('dddcdd')
        console.log(this.state.provinceData)
        console.log(this.state.cities)
        console.log('ddcdc')
        return (
            <div>

                <div>
                    文档类型:&nbsp;&nbsp;
                    <Select
                        id="role" style={{width: "370px"}}
                        onChange={value => this.handleTypeChange(value)}
                    >
                        <Option style={{}} value="0">文档</Option>
                        <Option value="1">PDF</Option>
                    </Select>
                </div>

                <div>
                    标题:&nbsp;&nbsp;
                    <Input
                        value={this.state.fileName}
                        readonly="readonly"
                        onChange={event => this.handleTitleChange(event.target.value)}
                        style={{width: "400px"}}>
                    </Input>
                </div>

                <div>
                    分类:&nbsp;&nbsp;
                    <Input
                        onChange={event => this.handleCategoryChange(event.target.value)}
                        style={{width: "400px"}}>
                    </Input>
                </div>

                <div>
                    作者:&nbsp;&nbsp;
                    <Input
                        onChange={event => this.handleAuthorChange(event.target.value)}
                        style={{width: "400px"}}>
                    </Input>
                </div>

                <div>
                    企业地区筛选 <Select
                    defaultValue={countryData[0]}
                    style={{width: 240}}
                    onChange={this.handleCountryChange}
                >
                    {countryData.map(country => (
                        <Option key={country}>{country}</Option>
                    ))}
                </Select>
                    <Select
                        style={{width: 120}}
                        value={this.state.countryOfProvince}
                        onChange={this.onCountryOProvinceChange}
                    >
                        {country.map(province => (
                            <Option key={province}>{province}</Option>
                        ))}
                    </Select>
                </div>

                <div>
                    描述:&nbsp;&nbsp; <TextArea
                    defaultValue={""}
                    value={this.state.description}
                    onChange={(event => this.handledDescriptionChange(event.target.value))}//留言
                    placeholder="输入内容,拖动右下角可以放大"
                    autosize={{minRows: 4, maxRows: 8}}
                />
                </div>


                <div>
                    <Upload {...props}>
                        <Button>
                            <Icon type="upload"/> 选择文件
                        </Button>
                    </Upload>
                    <Button
                        type="primary"
                        onClick={this.handleUpload}
                        disabled={fileList.length === 0}
                        loading={uploading}
                        style={{marginTop: 16}}
                    >
                        {uploading ? 'Uploading' : '开始上传'}
                    </Button>
                </div>
            </div>

        );

    }
}

export default UpLoad;